<!DOCTYPE html>
<html>
<head>
<script>
window.enablePixelTesting = true;
</script>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
</head>
<body>
<input type=color id=color value="#ff0000" list=gray focus>
<datalist id=gray>
    <option>#ffffff</option>
    <option>#eeeeee</option>
    <option>#dddddd</option>
    <option>#cccccc</option>
    <option>#bbbbbb</option>
    <option>#aaaaaa</option>
    <option>#999999</option>
    <option>#888888</option>
    <option>#777777</option>
    <option>#666666</option>
    <option>#555555</option>
    <option>#444444</option>
    <option>#333333</option>
    <option>#222222</option>
    <option>#111111</option>
    <option>#000000</option>
    <option>#F00</option> <!--invalid-->
    <option>red</option> <!--invalid-->
</datalist>

<p id="description" style="opacity: 0"></p>
<div id="console" style="opacity: 0"></div>

<script>
openPickerAppearanceOnly(document.getElementById('color'), test);

function test() {
    popupWindow.focus();
    eventSender.keyDown('ArrowDown');
    eventSender.keyDown('ArrowDown');
    eventSender.keyDown('ArrowDown');
    eventSender.keyDown('ArrowLeft');
    eventSender.keyDown('ArrowUp');
    eventSender.keyDown('ArrowRight');
    finishJSTest();
}
</script>
</body>
</html>
